import { useEffect } from "react";
import { Tabs } from "antd";

import styles from "../styles/affectCount.module.css";

import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);


const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['2023-03-04', '2023-03-05', '2023-03-06', '2023-03-07', '2023-03-08', '2023-03-09', '2023-03-10'],
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '受灾数量',
      type: 'bar',
      barWidth: '60%',
      data: [150, 230, 224, 218, 135, 147, 260],
    }
  ]
};


const AffectCount = () => {

  useEffect(()=> {
    const chartDom = document.getElementById('affectCount');
    const timer = setTimeout(()=>{
      const myChart = echarts.init(chartDom, 'dark');
      options && myChart.setOption(options);
    },0)
    return () => {
      clearTimeout(timer)
    }
  },[])

  return (
    <div className={styles.affectCount}>
      <Tabs
        type="card"
        defaultActiveKey="day"
        items={[
          { label: `日`, key: 'day',},
          { label: `周`, key: 'week',},
          { label: `月`, key: 'month',},
        ]} />
      <div id="affectCount" style={{height: '250px'}}></div>
    </div>
  );
};

export default AffectCount;
